<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="reg.css">
	<link href="css/index.css" rel="stylesheet" type="text/css" />
	<link href="css/注册等.css" rel="stylesheet" type="text/css" />
	<title>注册</title>
<script>window.onload=function(){
	document.getElementById("submit").onclick=function(){
		//获取用户内容
		var username=document.getElementById('username').value;
		var pwd=document.getElementById('pwd').value;
		var checkpwd=document.getElementById('checkpwd').value;
		var mailbox=document.getElementById('mailbox').value;
		var IDnum=document.getElementById('IDnum').value;
		var phonenum=document.getElementById('phonenum').value;

		//定义正则表达式

		//验证合法性并反馈给用户
		var warn="";
		// alert("dadfa")
		 if (!isUsername(username)) {
			warn="用户名不合法!\n";
		 }

		 if (!isPwd(pwd)) {
			warn+="密码不合法!\n";
		 }
		 if(pwd!=checkpwd){
		 	warn+="两次密码不一致!\n"
		 }
		  if (!isPhone(phonenum)) {
			warn+="电话号码不合法!\n";
		 }
		 if (!isEmail(mailbox)) {
			warn+="邮箱地址不合法!\n";
		 }
		 if (!isID(IDnum)) {
			warn+="身份号码不合法!\n";
		 }
		 if (warn) {
			alert(warn);
			return false;
		 }
	}

	document.getElementById('username').onblur=function(){
		var username=document.getElementById('username').value;
		if (!isUsername(username)) {
			document.getElementById('namewarn').innerText='\n用户必须是6-18位数字字母下划线';
			document.getElementById('namewarn').style.color='red';
		}
		else{
		    document.getElementById('namewarn').innerText='*';
			document.getElementById('namewarn').style.color='black';
			
		    }
		}
	document.getElementById('pwd').onblur=function(){
		var pwd=document.getElementById('pwd').value;
		if (!isPwd(pwd)) {
			document.getElementById('pwdwarn').innerText='\n密码必须是6-18位数字字母下划线';
			document.getElementById('pwdwarn').style.color='red';
		}
		else{
		    document.getElementById('pwdwarn').innerText='*';
			document.getElementById('pwdwarn').style.color='black';
			
		    }
		}
	document.getElementById('checkpwd').onblur=function(){
		var checkpwd=document.getElementById('checkpwd').value;
		var pwd=document.getElementById('pwd').value;
		if (pwd!=checkpwd) {
			document.getElementById('cpwarn').innerText='\n两次密码不一致';
			document.getElementById('cpwarn').style.color='red';
		}
		else{
		    document.getElementById('cpwarn').innerText='*';
			document.getElementById('cpwarn').style.color='black';
			
		    }
		}
	document.getElementById('phonenum').onblur=function(){
		var phonenum=document.getElementById('phonenum').value;
		if (!isPhone(phonenum)) {
			document.getElementById('phonewarn').innerText='\n请输入真实电话号码';
			document.getElementById('phonewarn').style.color='red';
		}
		else{
		    document.getElementById('phonewarn').innerText='*';
			document.getElementById('phonewarn').style.color='black';
			
		    }
		}
		}
function isUsername(str){
	var reUsern=/[^/w+$]{6,18}/;
	return reUsern.test(str);
}
function isPwd(str){
	var pwdre =/[^/w+$]{6,18}/;
	return pwdre.test(str);
}

function isPhone(str){
	var phone =/^1\d{10}$/;
	return phone.test(str);
}

function isEmail(str){
	var mail =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
	return mail.test(str);
}

function isID(str){
	var idnum =/(^d{15}$)|(^d{17}([0-9]|X)$)/;
	return idnum.test(str);
}
</script>

</head>
<body>
	<div class="fanhui">
        <a href="index.html" style="text-decoration: none;">返回首页</a>
        </div>
	<div class="con">
	<div id="wrap">
		<h1>用户注册</h1>
		<hr>
		<form action="" id="form" method="get" name="data">
				　用户名：
				<input type="text" name="username" id="username" placeholder="请输入用户名:6－18个字符、数字、下划线">
				<span id="namewarn">*</span>
			<br>
			
				　密　码：
				<input type="password" name="pwd" id="pwd" placeholder="请输入密码:6－18个字符、数字、下划线">
				<td><span id="pwdwarn">*</span></td>
			<br>
			
				密码确认：
				<input type="password" name="checkpwd" id="checkpwd" placeholder="请再次输入密码">
				<td><span id="cpwarn">*</span></td>
			<br>
			
				　Email：
				<input type="email1" name="mailbox" id="mailbox" placeholder="请输入电子邮箱">
			<br>
			
				身份证：
				<input type="text" name="IDnum" id="IDnum" placeholder="请输入真实身份证">
			<br>
			
				电话号码：
				<input type="text" name="phonenum" id="phonenum" placeholder="请输入真实电话号码">
				<td><span id="phonewarn">*</span></td>
			<br>
			<input type="reset" name="" value="重置"  id="reset">
			<input type="submit" name="" value="提交注册" id="submit">
			<br>
			<a href="登录.html">已有账号？点击此处登录</a>
	</div>
	</div>
	<div class="footer">
		<div class="xue_Info">
			<br>
			<p>2022-2023-1学期 &nbsp; Web应用开发基础课程设计</p>
			<br>
			<p>梁慧 &nbsp; 202009602022 &nbsp; 数据Q201</p>
		</div>			
	</div>

</body>
</html>